<template>
    <div class="spaceDetails hasFoot ">
        <HeaderNav3 :activeIndex="activeIndex"></HeaderNav3>
        <Contact></Contact>
        <Ad></Ad>
       <div class="spaceDetails-item wrap" :key="index" v-for="(item,index) in items" >
            <div class="item1">
                <div class="title">
                   <p>{{item.post_title}}</p>
                   <span>價格：<var>{{item.post_sell}}</var></span>
                   <span v-show="!item.post_class">首期：<var>${{item.post_down_payment}}萬</var></span>
               </div>
               <div class="banners">
                    <div class="banners1">
                        <SpaceBanner2 :spaceBanner="spaceBanner1"></SpaceBanner2>
                    </div>
                    <div class="banners1">
                       <SpaceBanner1 :spaceBanner="spaceBanner2"></SpaceBanner1>
                    </div>
               </div>
            </div>
           <div class="item2">
               <div class="l">                  
                   <div class="t">
                        <h1>
                           放盤資料
                        </h1>
                         <div class="collectIcon" :class="{collectOn:item.type}" @click.prevent="collect(item)">
                        </div>
                       <p>
                           {{item.type?'已收藏':'添加到我的最愛'}}  
                       </p> 
                        
                   </div>
                   <div class="box con">
                       <p> 
                            <span>面積： {{item.post_acreage}}尺</span>
                            <span id="orangeText">價格： {{item.post_sell}}</span>
                       </p>
                       <p>
                            <span>楼层以及间隔：{{item.post_floor}}&nbsp{{item.post_interval}}</span>
                            <span  id="orangeText"> 平均尺價：{{item.post_sell2}}</span>
                       </p>
                   </div>
               </div>
               <div class="l ">                  
                   <div class="t">
                        <h1>
                          為你服務的專業代理
                        </h1>
                   </div>
                   <div class="box-img" :key="agency" v-for="a in agency">
                       <div class="touxiang">
                          <img :src="a.avatar">
                       </div>
                       <div class="name" >
                           <p>
                               <span>{{a.user_nickname}}</span>
                               &nbsp
                               &nbsp
                               經紀人
                           </p>
                           <p>
                               {{a.mobile}}
                           </p>
                           <router-link :to="{path:'/allSpace',query:{id:a.id}}" class="btn">
                               本公司其他樓盤空間
                           </router-link>
                       </div>
                       <div class="company-logo">
                          <img :src="a.logo" alt="">
                       </div>
                   </div>
               </div>
           </div>
           <div class="item3">
                <div class="box1">
                    <div class="title">
                        <h1>
                            樓盤基本資料
                        </h1>
                    </div>
                    <div class="box">
                        <div class="t">
                            <div class="text">
                                <p>
                                    地址：<span>{{item.loupan.post_add}}</span>
                                </p>
                            </div>
                        </div>
                        <div class="t">
                            <div class="text">
                                  <p>
                                      入住年份：<span>{{item.loupan.post_year}}年</span>
                                  </p>
                                  <p>
                                      實用率：<span>{{item.loupan.post_ratio}}%</span>
                                  </p>
                              </div>
                        </div>
                        <div class="b">
                            <span>
                                會所設施：
                            </span>
                            <p>
                                {{item.loupan.post_device}}
                            </p>
                            
                        </div>
                        <div class="b">
                            <span>
                                地點優勢：
                            </span>
                            <p>
                                {{item.loupan.post_advantage}}
                            </p>
                            
                        </div>
                        <!-- <div class="t">
                            <div class="text" >
                                <p style="margin:0">
                                    
                                    <span>
                                        {{item.loupan.post_advantage}}
                                    </span>
                                </p>
                            </div>
                        </div> -->
                    </div>
                </div>
               <div class="box2">
                  <div class="title">
                      <h1>
                          尺數間隔資料
                      </h1>
                  </div> 
                  <div class="box">
                      <p :key="index" v-for="(p,index) in item.post_data">
                          {{p}}
                        </p>
                  </div>
                </div>
           </div>
           <div class="item4" v-if="!item.post_class">
               <div class="t">
                    <h1>
                      按揭計劃
                    </h1>
                </div>
               <div class="box con">
                    <p id="orangeText">
                        樓宇售價：<span>{{item.post_sell}}</span>
                        首期金額：<span>${{item.post_down_payment}}萬</span>
                    </p>
                    <p> 
                        貸款金額： <span>${{item.post_loan}}萬</span>
                        印花稅： <span>${{item.stamp_duty}}</span>
                    </p>
                    <p>
                        按揭年利率：<span style="margin-right:-14px; ">{{item.post_annual_rate}}%</span>
                    </p>
                    <p>
                        <var>假設供款年期：{{item.post_year2}}年</var>
                        <var>每月供款：${{item.monthly_supply}}</var>
                    </p>
               </div>
               <div class="quan-out">
                    <div class="quan">
                        <img :src="require('../../static/images/quan.png')">
                        <div class="installment">
                            <p>每月供款</p>
                            <p><var>${{item.monthly_supply}}</var></p>
                        </div>
                    </div>
                    <div class="rule">
                        <p>
                            政策說明： 
                        </p>
                        <div class="text">
                            <p>
                                假設現時銀行利率2.25%計算，只供一般參考，以銀行最終批出利率為準
                            </p>
                            <br>
                            <p>
                              印花稅：現時計算并未包括《公正費用》和《登記費如需要準確計算，請登入此<a href="http://www.dsaj.gov.mo/ContentFrame.aspx?ModuleName=SFT/Escrita/frmEscrita.ascx&Lang=zh-TW" target="_blank">&lt法務局&gt</a>  網站 ， 選擇 &lt 計算買賣及按揭費用&gt 選項計算。
                              本網站計算只供一般參考，一切以法務局計算為準。

                            </p>
                        </div>
                        <router-link to="/guide" class="btn2">
                            按此前往按揭計算器
                        </router-link >
                    </div>

               </div>
           </div>
           <div class="item5">
               <div class="title">
                   <h1>
                       其他熱門推介
                   </h1>
               </div>
               <div class="box">
                   <SpaceBanner3 :spaceBanner="spaceBanner3"></SpaceBanner3>
               </div>
           </div>
           <BrowseAndFavorite ></BrowseAndFavorite>
          
       </div>
    </div>
        
</template>

<script>
import HeaderNav3 from "@/components/HeaderNav3.vue"
import Contact from '@/components/Contact.vue'
import Ad from '@/components/Ad.vue'
import SpaceBanner2 from '@/components/SpaceBanner2.vue'
import SpaceBanner1 from '@/components/SpaceBanner1.vue'
import SpaceBanner3 from '@/components/SpaceBanner3.vue'
import BrowseAndFavorite from '@/components/BrowseAndFavorite.vue'

import { mapState } from "vuex"
import { V1_ADD_SPACE, V1_GET_SPACE} from "@/config/api"
export default {
	components:{
        Contact,
        Ad,
        SpaceBanner2,
        SpaceBanner1,
        SpaceBanner3,
        BrowseAndFavorite,
        HeaderNav3,
        
	},
    computed:{
        ...mapState({
            "userProfile":state=>state.app.userProfile
        })
    },
    activated(){ 
        this.$store.commit("IS_SHOW_ALERT",true)
        if(this.$route.query.id!=this.id){
            this.getData();
            this.id=this.$route.query.id;
        }

    },   
    data(){
        
        return{
            id:this.$route.query.id,
            "items":[],
            "agency":[],
            "spaceBanner1":[],
            "spaceBanner2":[],
            "spaceBanner3":[],
            "activeIndex":"4",
        }
    },
    methods:{
        getData(){
            this.$http.get(V1_GET_SPACE+this.$route.query.id,{
            }).then(res=>{
                if(res.data.success){
                    this.items=res.data.infor;
                    this.agency=res.data.infor[0].agent_info;
                    this.spaceBanner1=res.data.infor[0].more.photos;
                    this.spaceBanner2=res.data.infor[0].loupan.pingmian;
                    this.spaceBanner3=res.data.infor[0].other_hot;
                    // console.log("获取详情数据")
                }
            })
        },
        collect(item){
            if(this.userProfile){
                item.type = item.type?0:1;
                this.$http.put(V1_ADD_SPACE,{
                    "token":this.userProfile.token,
                    "id":item.id
                }).then(res=>{
                    if(res.data.success){
                        this.collectTypeF=item.type;
                        this.$router.go(0);
                    }
                })
            }else{
                this.$alert('沒有登錄', '請先登錄', {
                    confirmButtonText: '确定',
                });
            }
        }  
    },
    mounted(){
        this.getData();
        //判断是否有localStorage.space
        if(localStorage.space){
            let space = JSON.parse(localStorage.space);
            //filter 循环返回一个数组
            let isHas = space.data.filter((item)=>{
                return item == this.$route.query.id;
            }).length>0;
            //如果数组存在一样的id值则不执行任何操作
            if(isHas){
                return;
            }
            // 如果长度等于5则删除最后面一个
            if(space.data.length==5){
                space.data.pop();
            }
            // 如果长度不等于5则往最前面加一个
            space.data.unshift(this.$route.query.id);
            localStorage.space = JSON.stringify(space);
        }else{
            //如果没有localStorage.space则新建一个
            localStorage.space = JSON.stringify({data:[this.$route.query.id]});
        }
    }
   
}
</script>
<style lang="scss">
    @import "../style/spaceDetails";
</style>